<template>
  <view class="order-detail-page" v-if="detailInfo.oid">

    <view class="order-number">
      <view class="left">
        订单编号：
        <text class="number">{{detailInfo.order_no}}</text>

        <text class="type">{{ detailInfo.goods_type }}</text>
        <text class="weight">{{detailInfo.goods_weight}}公斤</text>
      </view>
      <view class="right-status"></view>
    </view>

    <view class="item-content">
      <view class="left">
        <view class="send-wrap mb-20">
          <view class="icon">寄</view>
          <view class="send-info">
            <view class="top-name">
              <view class="name">{{ detailInfo.a1name }}</view>

              <uni-tag
                :text="'下单时间：' + detailInfo.pay_str "
                type="default"
                size="small"
              ></uni-tag>

            </view>
            <view class="bottom-address">{{ detailInfo.a1areaaddress + detailInfo.a1name_address + detailInfo.a1doornumber }}</view>
          </view>
        </view>

        <view class="send-wrap receiving-wrap">
          <view class="icon">收</view>
          <view class="send-info">
            <view class="top-name">
              <view class="name">{{ detailInfo.a2name }}</view>
            </view>
            <view class="bottom-address">{{ detailInfo.a2areaaddress + detailInfo.a2name_address + detailInfo.a2doornumber }}</view>
          </view>
        </view>
      </view>

      <view class="right">
        <view class="status-wrap">{{orderStatusMapText[detailInfo.goods_status]}}</view>

        <view class="evaluate-button" v-if="parseInt(detailInfo.goods_status) === 3">
          <van-button
            type="info"
            size="mini"
            @click="handleToEvaluate"
          >{{parseInt(detailInfo.is_comment) === 1 ? '已评价' : '去评价'}}</van-button>
        </view>
      </view>
    </view>

    <view class="order-status-wrap">
      <view class="title">{{orderStatusMapText[detailInfo.goods_status]}}</view>

      <view class="status-image">
        <image :src="ftp + orderDetailImageMap[detailInfo.goods_status]"></image>
      </view>

      <view class="tip">{{orderStatusMapTipText[detailInfo.goods_status]}}</view>
    </view>

    <view
      v-if="detailInfo.express_user.id"
      class="delivery-man-info-wrap"
    >
      <DeliveryManInfo :info="detailInfo.express_user"/>
    </view>



    <van-cell is-link @click="handleToLineRoutePlanning">
      <view slot="title" class="function-row">
        <view class="icon">
          <image src='/static/image/insurance-order-detail.png'></image>
        </view>

        <view class="name">保险单</view>
      </view>
    </van-cell>

    <van-cell
      custom-class='margin-bottom-cell'
      is-link @click="handleToLineRoutePlanning"
    >
      <view slot="title" class="function-row">
        <view class="icon">
          <image src='/static/image/express-order-detail.png'></image>
        </view>

        <view class="name">快递单</view>
      </view>
    </van-cell>

    <!-- <view class="option-button">
      <van-button
        custom-class='receiving-order-btn'
        type="info"
      >请等待快递员上门取件
      </van-button>
    </view>-->

  </view>
</template>

<script>
import DeliveryManInfo from "@/components/DeliveryManInfo/index.vue";
const app = getApp()

export default {
  components: {
    DeliveryManInfo
  },
  data() {
    return {
      ftp: app.globalData.ftp,
      oid: '',
      detailInfo: {},
      orderStatusMapText: {
        0: '待接单',
        1: '待取件',
        2: '配送中',
        3: '已完成',
        4: '已取消',
      },
      orderStatusMapTipText: {
        0: '已下单，请等待快递员接单',
        1: '快递员已接单，会尽快上门取件，请保持电话联络畅通',
        2: '快递员配送中',
        3: '订单已完成',
        4: '订单已取消',
      },
      orderDetailImageMap: {
        0: '/2/order-detail-0.png',
        1: '/2/order-detail-1.png',
        2: '/2/order-detail-2.png',
        3: '/2/order-detail-3.png',
      },
      btnMapTipText: {

      }

    }
  },
  methods: {
    handleToChat() {
      uni.navigateTo({
        url: '/pages/myFeature/chat/index'
      })
    },
    handleCall() {
      uni.makePhoneCall({
        phoneNumber: '18673586986' //仅
      });
    },
    handleToLineRoutePlanning() {
      uni.navigateTo({
        url: '/pages/kdOrder/locationTracking'
      })
    },
    handleScanning() {
      uni.scanCode({
        success(data) {
          console.log(data);
        }
      })
    },
    handleToEvaluate() {
      const {
        oid,
        express_user,
        is_comment,
        comment_info
      } = this.detailInfo
      const {
        id
      } = express_user

      let str = app.getQueryStringByObject({
        expressId: id,
        oid: oid,
        is_comment,
        ...comment_info
      })

      uni.navigateTo({
        url: '/pages/myFeature/submitEval/index' + str
      })
    },
    handleGetDetail() {
      const {
        oid
      } = this

      app.request({oid}, '/api/logistics/order/user_detail').then((res) => {
        console.log(res)
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          this.detailInfo = data
        } else {
          Toast(msg)
        }
      })
    }
  },
  onLoad(res) {
    const {
      oid
    } = res

    this.oid = oid
    this.handleGetDetail()
  },
}
</script>

<style lang="less">
.order-detail-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;

  .order-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 73rpx;
    border-bottom: 1rpx solid #f0f0f8;
    background-color: #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: 26rpx;

    .left {
      .number {
        color: #1e79d2;
      }
      .type {
        margin-left: 18rpx;
        color: #999999;
      }
      .weight {
        color: #999999;
      }
    }

    .right-status {
      font-size: 26rpx;
      color: #1e79d2;
    }
  }

  .order-info-wrap {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 20rpx 1rpx;
    box-sizing: border-box;
    font-size: 26rpx;
    margin-bottom: 15rpx;

    .info-row {
      margin-bottom: 20rpx;
    }
  }

  .item-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 22rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 16rpx 0;
    .left {
      .mb-20 {
        margin-bottom: 20rpx;
      }

      .send-wrap {
        display: flex;
        align-items: center;

        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #f0ad4e;
          font-size: 22rpx;
        }

        .send-info {
          .top-name {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;

            .name {
              font-size: 26rpx;
              margin-right: 22rpx;
            }
          }

          .bottom-address {
            color: #999999;
            font-size: 22rpx;
          }
        }
      }

      .receiving-wrap {
        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #157FB9;
          font-size: 22rpx;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      .status-wrap {
        color: #999;
        font-size: 24rpx;
        font-weight: bold;
        white-space: nowrap;
      }
      .evaluate-button {
        margin-left: 16rpx;
      }
    }
  }


  .order-status-wrap {
    background-color: #fff;
    margin-bottom: 16rpx;
    .title {
      padding-top: 30rpx;
      padding-bottom: 10rpx;
      text-align: center;
      color: #999;
      font-size: 36rpx;
    }

    .status-image {
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .tip {
      text-align: center;
      font-size: 22rpx;
      padding-bottom: 32rpx;
    }

  }

  .delivery-man-info-wrap {
    background-color: #fff;
    margin-bottom: 16rpx;
  }

  .margin-bottom-cell {
    margin-bottom: 16rpx;
  }

  .function-row {
    display: flex;
    align-items: center;

    .icon {
      width: 38rpx;
      height: 38rpx;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .naem {
      margin-left: 20rpx;
      font-size: 26rpx;
    }
  }


  .option-button {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 16rpx;

    .receiving-order-btn {
      width: 100%;
      height: 82rpx;
    }
  }
}
</style>